<template>
  <div class="full-screen-wrapper" @click="handleFullscreen">
    <!-- <div style="width: 20px; height: 20px"> -->
    <svg
      v-if="!isFullscreen"
      t="1666171872808"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="2558"
      width="40"
      height="40"
    >
      <path
        d="M918.116352 107.409408c10.186752 10.175488 10.186752 26.691584 0 36.87936L653.734912 407.038976c-10.187776 10.187776-26.703872 10.187776-36.891648 0-10.175488-10.187776-10.175488-26.703872 0.013312-36.891648l264.38144-262.73792c10.174464-10.187776 26.69056-10.200064 36.87936-0.013312L918.117376 107.409408zM878.281728 148.096l-161.155072-0.44544c-11.283456 0.279552-20.85888-8.226816-21.90336-19.458048l0-13.421568c0.318464-10.671104 8.889344-19.241984 19.560448-19.560448l187.030528 0.827392c0.1792-0.037888 0.357376-0.0768 0.523264-0.089088l9.549824-0.229376c5.005312-0.152576 9.843712 1.770496 13.372416 5.336064 3.32288 3.629056 4.9664 8.49408 4.545536 13.40928l-1.032192 9.537536c0 0.191488 0.70144 0.318464 0.70144 0.49664l-0.534528 188.279808c-0.54784 9.984-9.092096 17.637376-19.076096 17.089536-0.165888-0.012288-0.319488-0.0256-0.484352-0.037888L896.009216 329.8304c-10.379264-0.0512-18.733056-8.506368-18.681856-18.885632 0.013312-0.191488 0.013312-0.381952 0.013312-0.585728L878.281728 148.096zM105.884672 916.661248c-10.187776-10.175488-10.200064-26.691584-0.013312-36.87936 0 0 0-0.013312 0.013312-0.013312l265.19552-262.73792c10.35264-10.008576 26.86976-9.729024 36.866048 0.636928 9.766912 10.110976 9.766912 26.131456 0 36.242432L143.579136 916.661248C133.072896 926.848 116.3776 926.848 105.884672 916.661248L105.884672 916.661248zM146.533376 875.973632l161.154048 0.433152c11.283456-0.292864 20.85888 8.213504 21.891072 19.458048l0 13.38368c-0.292864 10.672128-8.876032 19.255296-19.560448 19.561472l-187.858944-0.828416c-0.165888 0.037888-0.344064 0.075776-0.509952 0.089088l-9.550848 0.229376c-5.004288 0.152576-9.831424-1.782784-13.35808-5.336064-3.323904-3.629056-4.979712-8.493056-4.54656-13.395968l1.031168-9.537536c0-0.191488-0.712704-0.330752-0.700416-0.509952l0.534528-188.278784c0.534528-9.984 9.066496-17.625088 19.050496-17.089536 0.165888 0.013312 0.330752 0.0256 0.508928 0.037888l14.212096 0c10.365952 0.0512 18.719744 8.507392 18.656256 18.873344 0 0.191488 0 0.395264-0.013312 0.598016L146.533376 875.973632zM918.116352 916.661248c10.186752-10.175488 10.200064-26.691584 0.012288-36.87936 0 0 0-0.013312-0.012288-0.013312l-264.38144-262.73792c-10.365952-10.008576-26.86976-9.729024-36.87936 0.636928-9.766912 10.110976-9.766912 26.131456 0 36.242432L881.22368 916.661248c10.186752 10.186752 26.703872 10.186752 36.891648 0.013312L918.115328 916.661248 918.116352 916.661248zM878.281728 875.973632l-161.168384 0.433152c-11.270144-0.292864-20.845568 8.213504-21.890048 19.458048l0 13.38368c0.306176 10.672128 8.889344 19.241984 19.560448 19.561472l187.030528-0.828416c0.1792 0.037888 0.357376 0.075776 0.523264 0.089088l9.549824 0.229376c5.005312 0.152576 9.843712-1.782784 13.372416-5.336064 3.32288-3.629056 4.978688-8.493056 4.545536-13.395968l-1.032192-9.537536c0-0.191488 0.70144-0.330752 0.70144-0.509952l-0.534528-188.278784c-0.54784-9.984-9.092096-17.637376-19.076096-17.089536-0.165888 0.013312-0.319488 0.0256-0.484352 0.037888L896.009216 694.19008c-10.379264 0.0512-18.733056 8.507392-18.681856 18.885632 0 0.191488 0.013312 0.381952 0.013312 0.584704L878.281728 875.973632zM105.884672 107.409408c-10.187776 10.175488-10.187776 26.691584 0 36.87936l265.19552 262.750208c10.187776 10.187776 26.691584 10.187776 36.87936 0s10.175488-26.703872-0.012288-36.891648l-264.368128-262.73792C133.072896 97.222656 116.3776 97.222656 105.884672 107.409408L105.884672 107.409408zM146.533376 148.096l161.154048-0.44544c11.283456 0.292864 20.85888-8.213504 21.891072-19.458048l0-13.421568c-0.306176-10.671104-8.889344-19.241984-19.560448-19.560448l-187.858944 0.827392c-0.165888-0.0512-0.344064-0.0768-0.509952-0.089088l-9.550848-0.229376c-5.004288-0.152576-9.831424 1.782784-13.35808 5.336064-3.323904 3.629056-4.979712 8.49408-4.54656 13.40928l1.031168 9.537536c0 0.191488-0.712704 0.318464-0.700416 0.49664l0.534528 188.279808c0.534528 9.970688 9.066496 17.624064 19.050496 17.089536 0.165888-0.012288 0.330752-0.0256 0.508928-0.037888l14.212096 0c10.365952-0.0512 18.719744-8.506368 18.656256-18.87232 0-0.191488 0-0.395264-0.013312-0.598016L146.533376 148.096z"
        p-id="2559"
        fill="#1296db"
      ></path>
    </svg>
  </div>
</template>
<script>
import screenfull from 'screenfull'
export default {
  name: 'FullScreen',
  data() {
    return {
      isFullscreen: false
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    handleFullscreen() {
      if (screenfull.enabled) {
        this.$message({
          message: '不支持全屏',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
    },
    change() {
      this.isFullscreen = screenfull.isFullscreen
    },
    init() {
      if (!screenfull.enabled) {
        screenfull.on('change', this.change)
      }
    },
    destroy() {
      if (!screenfull.enabled) {
        screenfull.off('change', this.change)
      }
    }
  },
  beforeDestroy() {
    this.destroy()
  }
}
</script>
<style lang="scss" scoped>
.full-screen-wrapper {
  // float: left;
  position: fixed;
  left: 10;
  top: 0;
  // background: #fff;
  z-index: 999;
  width: 30px;
  height: 30px;
  line-height: 30px;
  margin-top: 5px;
  color: #fff;
  // background: red;
  cursor: pointer;
  .icon {
    font-size: 24px;
  }
  &:hover {
    color: #409eff;
  }
}
</style>
